<template>
	<view class="order">
		<block v-for="item in list" :key="item.order_sn">
			<view class="item">
				<view class="top">
					<view class="number">订单编号：{{item.order_sn}}</view>
				</view>
				<view class="item-cont dfc">
					<image :src="item.thumb" mode="aspectFill"></image>
					<view class="cont">
						<view class="title">{{item.title}}</view>
						<view class="price">{{item.title}}</view>
						<view class="price" style="margin-top: 18rpx; font-size: 24rpx;">接收人：{{item.nickname}}</view>
					</view>
				</view>
				<view class="time">
					转赠时间：{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss')}}
				</view>
			</view>
		</block>
		<block v-if="loading&&list.length<1">
			<Empty text="暂无转赠" :type="2"></Empty>
		</block>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Empty from "@/components/Empty.vue"
	export default {
		mixins: [mixin],
		components: {
			Empty
		},
		data() {
			return {
				loading: false,
				list: [],
				page: 1,
				size: 10
			}
		},
		onReady() {

		},
		onLoad() {
			this.shiftList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.shiftList()
		},
		onReachBottom() {
			console.log('[触底]')
			this.shiftList()
		},
		methods: {
			async shiftList() {
				let data = await this.$http({
					url: this.$api.shiftList,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {
						page: this.page,
						page_size: this.size,
					}
				})
				console.log('[转增记录]', data)
				this.loading = true
				if (data.code == 200) {
					if (this.page == 1) {
						this.list = []
					}
					this.total = data.data.total
					if (this.list.length < data.data.total) {
						this.list = this.list.concat(data.data.data)
						this.page += 1
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dfc {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order {
		min-height: 100vh;
		padding: 30rpx 0;
		box-sizing: border-box;
		background-color: #f5f5f5;

		.item {
			padding: 18rpx 34rpx 26rpx 34rpx;
			background: #FFF;
			margin-bottom: 12rpx;

			.top {
				font-size: 24rpx;
				font-weight: 600;
				color: #999999;
				line-height: 36rpx;
			}

			.item-cont {
				margin-top: 16rpx;

				image {
					width: 172rpx;
					height: 172rpx;
					border-radius: 28rpx;
				}

				.cont {
					width: calc(100% - 202rpx);

					.title {
						font-size: 28rpx;
						font-weight: 600;
						color: #131415;
					}

					.price {
						font-size: 28rpx;
						font-weight: 600;
						color: #999;
						word-wrap: break-word;
					}
				}
			}
		}

		.time {
			margin-top: 18rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #999;
		}

		.no-order {
			height: calc(100vh - 60rpx);
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			text-align: center;

			image {
				width: 460rpx;
				height: 324rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 46rpx;
				margin-top: 90rpx;
			}
		}
	}
</style>
